ரியாக்ட் useImperativeHandle: Ref தனிப்பயனாக்குதல் முறைகளில் தேர்ச்சி பெறுதல்

ரியாக்ட்டின் useImperativeHandle hook என்பது React.forwardRef-ஐப் பயன்படுத்தும்போது பெற்றோர் காம்போனென்ட்களுக்கு வெளிப்படுத்தப்படும் instance மதிப்பைத் தனிப்பயனாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். பொதுவாக ரியாக்ட் declarative programming-ஐ ஊக்குவித்தாலும், தேவைப்படும்போது imperative தொடர்புகளுக்கு useImperativeHandle ஒரு கட்டுப்படுத்தப்பட்ட வழியை வழங்குகிறது. இந்த கட்டுரை உங்கள் ரியாக்ட் காம்போனென்ட்களை மேம்படுத்த useImperativeHandle-ஐ திறம்பட பயன்படுத்துவதற்கான பல்வேறு பயன்பாட்டு வழக்குகள், சிறந்த நடைமுறைகள் மற்றும் மேம்பட்ட முறைகளை ஆராய்கிறது.

Refs மற்றும் forwardRef-ஐப் புரிந்துகொள்ளுதல்

useImperativeHandle-க்குள் முழுமையாகச் செல்வதற்கு முன், refs மற்றும் forwardRef-ஐப் புரிந்துகொள்வது அவசியம். Refs, அடிப்படையிலுள்ள DOM node அல்லது ரியாக்ட் காம்போனென்ட் instance-ஐ அணுக ஒரு வழியை வழங்குகின்றன. இருப்பினும், நேரடி அணுகல் ரியாக்ட்டின் ஒருதிசை தரவு ஓட்டக் கொள்கைகளை மீறக்கூடும், எனவே குறைவாகவே பயன்படுத்தப்பட வேண்டும்.

forwardRef ஒரு ref-ஐ ஒரு சைல்டு காம்போனென்ட்டுக்கு அனுப்ப உங்களை அனுமதிக்கிறது. பெற்றோர் காம்போனென்ட், சைல்டு காம்போனென்ட்டிற்குள் இருக்கும் ஒரு DOM உறுப்புடன் அல்லது காம்போனென்ட்டுடன் நேரடியாகத் தொடர்பு கொள்ள வேண்டியிருக்கும் போது இது முக்கியமானது. இதோ ஒரு அடிப்படை எடுத்துக்காட்டு:

            import React, { useRef, forwardRef, useImperativeHandle } from 'react';

const MyInput = forwardRef((props, ref) => {
  return ; // Assign the ref to the input element
});

const ParentComponent = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // Imperatively focus the input
  };

  return (
    

      
      Focus Input
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

useImperativeHandle-ன் அறிமுகம்

useImperativeHandle, forwardRef மூலம் வெளிப்படுத்தப்படும் instance மதிப்பைத் தனிப்பயனாக்க உங்களை அனுமதிக்கிறது. முழு DOM node அல்லது காம்போனென்ட் instance-ஐ வெளிப்படுத்துவதற்குப் பதிலாக, நீங்கள் குறிப்பிட்ட மெத்தட்கள் அல்லது ப்ராப்பர்டிகளைத் தேர்ந்தெடுத்து வெளிப்படுத்தலாம். இது பெற்றோர் காம்போனென்ட்கள் சைல்டு காம்போனென்ட்டுடன் தொடர்பு கொள்ள ஒரு கட்டுப்படுத்தப்பட்ட இடைமுகத்தை வழங்குகிறது, ஒரு குறிப்பிட்ட அளவு உள்ளடக்கத்தை (encapsulation) பராமரிக்கிறது.

useImperativeHandle hook மூன்று ஆர்குமென்ட்களை ஏற்றுக்கொள்கிறது:

• ref: forwardRef வழியாக பெற்றோர் காம்போனென்ட்டிலிருந்து அனுப்பப்பட்ட ref ஆப்ஜெக்ட்.
• createHandle: நீங்கள் வெளிப்படுத்த விரும்பும் மதிப்பைத் திருப்பியனுப்பும் ஒரு ஃபங்ஷன். இந்த ஃபங்ஷன், பெற்றோர் காம்போனென்ட் ref மூலம் அணுகக்கூடிய மெத்தட்கள் அல்லது ப்ராப்பர்டிகளை வரையறுக்கலாம்.
• dependencies: இது ஒரு விருப்பமான சார்புநிலைகளின் வரிசை (array). இந்த சார்புநிலைகளில் ஒன்று மாறினால் மட்டுமே createHandle ஃபங்ஷன் மீண்டும் செயல்படுத்தப்படும். இது useEffect-இல் உள்ள சார்புநிலை வரிசையைப் போன்றது.

அடிப்படை useImperativeHandle எடுத்துக்காட்டு

முந்தைய எடுத்துக்காட்டை useImperativeHandle-ஐப் பயன்படுத்தி மாற்றுவோம், இது focus மற்றும் blur மெத்தட்களை மட்டுமே வெளிப்படுத்த அனுமதிக்கும், மற்ற input உறுப்பு ப்ராப்பர்டிகளுக்கான நேரடி அணுகலைத் தடுக்கும்.

            import React, { useRef, forwardRef, useImperativeHandle } from 'react';

const MyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    blur: () => {
      inputRef.current.blur();
    },
  }), []);

  return ; // Assign the ref to the input element
});

const ParentComponent = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // Imperatively focus the input
  };

  return (
    

      
      Focus Input
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், பெற்றோர் காம்போனென்ட் inputRef.current ஆப்ஜெக்ட்டில் focus மற்றும் blur மெத்தட்களை மட்டுமே அழைக்க முடியும். இது input உறுப்பின் பிற ப்ராப்பர்டிகளை நேரடியாக அணுக முடியாது, இது உள்ளடக்கத்தை (encapsulation) மேம்படுத்துகிறது.

பொதுவான useImperativeHandle முறைகள்

1. குறிப்பிட்ட காம்போனென்ட் மெத்தட்களை வெளிப்படுத்துதல்

பெற்றோர் காம்போனென்ட் தூண்ட வேண்டிய சைல்டு காம்போனென்ட்டின் மெத்தட்களை வெளிப்படுத்துவது ஒரு பொதுவான பயன்பாடு ஆகும். உதாரணமாக, ஒரு தனிப்பயன் வீடியோ பிளேயர் காம்போனென்ட்டைக் கவனியுங்கள்.

            import React, { useRef, forwardRef, useImperativeHandle, useState } from 'react';

const VideoPlayer = forwardRef((props, ref) => {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const play = () => {
    videoRef.current.play();
    setIsPlaying(true);
  };

  const pause = () => {
    videoRef.current.pause();
    setIsPlaying(false);
  };

  useImperativeHandle(ref, () => ({
    play,
    pause,
    togglePlay: () => {
      if (isPlaying) {
        pause();
      } else {
        play();
      }
    },
  }), [isPlaying]);

  return (
    

      
  );
});

const ParentComponent = () => {
  const playerRef = useRef(null);

  return (
    

      
       playerRef.current.play()}>Play Video
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், பெற்றோர் காம்போனென்ட் playerRef.current ஆப்ஜெக்ட்டில் play, pause, அல்லது togglePlay-ஐ அழைக்க முடியும். வீடியோ பிளேயர் காம்போனென்ட் வீடியோ உறுப்பு மற்றும் அதன் play/pause தர்க்கத்தை உள்ளடக்கியுள்ளது.

2. அனிமேஷன்கள் மற்றும் மாற்றங்களைக் கட்டுப்படுத்துதல்

பெற்றோர் காம்போனென்ட்டிலிருந்து ஒரு சைல்டு காம்போனென்ட்டிற்குள் அனிமேஷன்கள் அல்லது மாற்றங்களைத் தூண்டுவதற்கு useImperativeHandle பயனுள்ளதாக இருக்கும்.

            import React, { useRef, forwardRef, useImperativeHandle, useState } from 'react';

const AnimatedBox = forwardRef((props, ref) => {
  const boxRef = useRef(null);
  const [isAnimating, setIsAnimating] = useState(false);

  const animate = () => {
    setIsAnimating(true);
    // Add animation logic here (e.g., using CSS transitions)
    setTimeout(() => {
      setIsAnimating(false);
    }, 1000); // Duration of the animation
  };

  useImperativeHandle(ref, () => ({
    animate,
  }), []);

  return (
    

  );
});

const ParentComponent = () => {
  const boxRef = useRef(null);

  return (
    

      
       boxRef.current.animate()}>Animate Box
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

பெற்றோர் காம்போனென்ட் boxRef.current.animate()-ஐ அழைப்பதன் மூலம் AnimatedBox காம்போனென்ட்டில் உள்ள அனிமேஷனைத் தூண்ட முடியும். அனிமேஷன் தர்க்கம் சைல்டு காம்போனென்ட்டிற்குள் உள்ளடக்கப்பட்டுள்ளது.

3. தனிப்பயன் படிவ சரிபார்ப்பை செயல்படுத்துதல்

பெற்றோர் காம்போனென்ட் சைல்டு படிவ புலங்களுக்குள் சரிபார்ப்பு தர்க்கத்தைத் தூண்ட வேண்டிய சிக்கலான படிவ சரிபார்ப்பு சூழ்நிலைகளை useImperativeHandle எளிதாக்க முடியும்.

            import React, { useRef, forwardRef, useImperativeHandle, useState } from 'react';

const InputField = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  const [error, setError] = useState('');

  const validate = () => {
    if (inputRef.current.value === '') {
      setError('This field is required.');
      return false;
    } else {
      setError('');
      return true;
    }
  };

  useImperativeHandle(ref, () => ({
    validate,
  }), []);

  return (
    

      
      {error && 
{error}
}
    
  );
});

const ParentForm = () => {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const handleSubmit = () => {
    const isNameValid = nameRef.current.validate();
    const isEmailValid = emailRef.current.validate();

    if (isNameValid && isEmailValid) {
      alert('Form is valid!');
    } else {
      alert('Form is invalid.');
    }
  };

  return (
    

      
      
      Submit
    
  );
};

export default ParentForm;

            

              
                Copy
              
            
          

பெற்றோர் படிவ காம்போனென்ட் ஒவ்வொரு InputField காம்போனென்ட்டிற்குள்ளும் உள்ள சரிபார்ப்பு தர்க்கத்தை nameRef.current.validate() மற்றும் emailRef.current.validate()-ஐ அழைப்பதன் மூலம் தூண்ட முடியும். ஒவ்வொரு உள்ளீட்டுப் புலமும் அதன் சொந்த சரிபார்ப்பு விதிகள் மற்றும் பிழைச் செய்திகளைக் கையாளுகிறது.

மேம்பட்ட பரிசீலனைகள் மற்றும் சிறந்த நடைமுறைகள்

1. கட்டளை வழித் தொடர்புகளைக் குறைத்தல்

useImperativeHandle கட்டளை வழிச் செயல்களைச் செய்ய ஒரு வழியை வழங்கினாலும், அவற்றின் பயன்பாட்டைக் குறைப்பது மிகவும் முக்கியம். கட்டளை வழி முறைகளை அதிகமாகப் பயன்படுத்துவது உங்கள் குறியீட்டைப் புரிந்துகொள்வதற்கும், சோதிப்பதற்கும், பராமரிப்பதற்கும் கடினமாக்கும். ஒரு declarative அணுகுமுறை (எ.கா., props-களை அனுப்புதல் மற்றும் state புதுப்பிப்புகளைப் பயன்படுத்துதல்) அதே முடிவை அடைய முடியுமா என்று கருத்தில் கொள்ளுங்கள்.

2. கவனமான API வடிவமைப்பு

useImperativeHandle-ஐப் பயன்படுத்தும்போது, நீங்கள் பெற்றோர் காம்போனென்ட்டிற்கு வெளிப்படுத்தும் API-ஐ கவனமாக வடிவமைக்கவும். தேவையான மெத்தட்கள் மற்றும் ப்ராப்பர்டிகளை மட்டுமே வெளிப்படுத்துங்கள், மேலும் உள்செயல்பாட்டு விவரங்களை வெளிப்படுத்துவதைத் தவிர்க்கவும். இது உள்ளடக்கத்தை ஊக்குவிக்கிறது மற்றும் உங்கள் காம்போனென்ட்களை மாற்றங்களுக்கு अधिक நெகிழ்வானதாக ஆக்குகிறது.

3. சார்புநிலை மேலாண்மை (Dependency Management)

useImperativeHandle-இன் சார்புநிலை வரிசையில் (dependency array) மிகுந்த கவனம் செலுத்துங்கள். தேவையற்ற சார்புநிலைகளைச் சேர்ப்பது செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும், ஏனெனில் createHandle ஃபங்ஷன் தேவைக்கு அதிகமாக மீண்டும் செயல்படுத்தப்படும். மாறாக, தேவையான சார்புநிலைகளைத் தவிர்ப்பது காலாவதியான மதிப்புகள் மற்றும் எதிர்பாராத நடத்தைக்கு வழிவகுக்கும்.

4. அணுகல்தன்மை பரிசீலனைகள்

DOM உறுப்புகளைக் கையாள useImperativeHandle-ஐப் பயன்படுத்தும்போது, நீங்கள் அணுகல்தன்மையை பராமரிப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். உதாரணமாக, ஒரு உறுப்பை நிரலாக்க ரீதியாக focus செய்யும்போது, focus மாற்றத்தைப் பற்றி screen reader-களுக்கு அறிவிக்க aria-live பண்பை அமைப்பதைக் கருத்தில் கொள்ளுங்கள்.

5. கட்டளை வழி காம்போனென்ட்களைச் சோதித்தல்

useImperativeHandle-ஐப் பயன்படுத்தும் காம்போனென்ட்களைச் சோதிப்பது சவாலாக இருக்கலாம். வெளிப்படுத்தப்பட்ட மெத்தட்கள் எதிர்பார்த்தபடி செயல்படுகின்றன என்பதைச் சரிபார்க்க, உங்கள் சோதனைகளில் mocking நுட்பங்களைப் பயன்படுத்த வேண்டும் அல்லது ref-ஐ நேரடியாக அணுக வேண்டியிருக்கலாம்.

6. சர்வதேசமயமாக்கல் (i18n) பரிசீலனைகள்

உரைகளைக் கையாள அல்லது தகவல்களைக் காட்ட useImperativeHandle-ஐப் பயன்படுத்தும் பயனர் எதிர்கொள்ளும் காம்போனென்ட்களைச் செயல்படுத்தும்போது, சர்வதேசமயமாக்கலைக் கருத்தில் கொள்வதை உறுதிப்படுத்திக் கொள்ளுங்கள். உதாரணமாக, ஒரு தேதி தேர்வியை (date picker) செயல்படுத்தும்போது, பயனரின் இருப்பிடத்திற்கு ஏற்ப தேதிகள் வடிவமைக்கப்படுவதை உறுதிப்படுத்தவும். இதேபோல், பிழைச் செய்திகளைக் காட்டும்போது, உள்ளூர்மயமாக்கப்பட்ட செய்திகளை வழங்க i18n நூலகங்களைப் பயன்படுத்தவும்.

7. செயல்திறன் தாக்கங்கள்

useImperativeHandle தானாகவே செயல்திறன் தடைகளை ஏற்படுத்தாது என்றாலும், வெளிப்படுத்தப்பட்ட மெத்தட்கள் மூலம் செய்யப்படும் செயல்கள் செயல்திறன் தாக்கங்களைக் கொண்டிருக்கலாம். உதாரணமாக, சிக்கலான அனிமேஷன்களைத் தூண்டுவது அல்லது மெத்தட்களுக்குள் விலையுயர்ந்த கணக்கீடுகளைச் செய்வது உங்கள் பயன்பாட்டின் பதிலளிப்புத் தன்மையைப் பாதிக்கலாம். உங்கள் குறியீட்டை ஆய்வு செய்து அதற்கேற்ப மேம்படுத்துங்கள்.

useImperativeHandle-க்கு மாற்றுகள்

பல சந்தர்ப்பங்களில், நீங்கள் ஒரு declarative அணுகுமுறையைக் கடைப்பிடிப்பதன் மூலம் useImperativeHandle-ஐப் பயன்படுத்துவதை முற்றிலுமாகத் தவிர்க்கலாம். இதோ சில மாற்றுகள்:

• Props மற்றும் State: தரவு மற்றும் நிகழ்வு கையாளிகளை props ஆக சைல்டு காம்போனென்ட்டிற்கு அனுப்பவும், பெற்றோர் காம்போனென்ட் state-ஐ நிர்வகிக்கட்டும்.
• Context API: prop drilling இல்லாமல் காம்போனென்ட்களுக்கு இடையில் state மற்றும் மெத்தட்களைப் பகிர்ந்து கொள்ள Context API-ஐப் பயன்படுத்தவும்.
• தனிப்பயன் நிகழ்வுகள் (Custom Events): சைல்டு காம்போனென்ட்டிலிருந்து தனிப்பயன் நிகழ்வுகளை அனுப்பவும், பெற்றோர் காம்போனென்ட்டில் அவற்றைக் கேட்கவும்.

முடிவுரை

useImperativeHandle என்பது ரியாக்ட்டில் ref-களைத் தனிப்பயனாக்குவதற்கும் குறிப்பிட்ட காம்போனென்ட் செயல்பாடுகளை வெளிப்படுத்துவதற்கும் ஒரு மதிப்புமிக்க கருவியாகும். அதன் திறன்கள் மற்றும் வரம்புகளைப் புரிந்துகொள்வதன் மூலம், ஒரு குறிப்பிட்ட அளவு உள்ளடக்கம் மற்றும் கட்டுப்பாட்டைப் பராமரிக்கும் அதே வேளையில், உங்கள் காம்போனென்ட்களை மேம்படுத்த அதை நீங்கள் திறம்படப் பயன்படுத்தலாம். கட்டளை வழித் தொடர்புகளைக் குறைக்கவும், உங்கள் API-களை கவனமாக வடிவமைக்கவும், அணுகல்தன்மை மற்றும் செயல்திறன் தாக்கங்களைக் கருத்தில் கொள்ளவும் நினைவில் கொள்ளுங்கள். மேலும் பராமரிக்கக்கூடிய மற்றும் சோதிக்கக்கூடிய குறியீட்டை உருவாக்க முடிந்தவரை மாற்று declarative அணுகுமுறைகளை ஆராயுங்கள்.

இந்த வழிகாட்டி useImperativeHandle, அதன் பொதுவான முறைகள் மற்றும் மேம்பட்ட பரிசீலனைகள் பற்றிய ஒரு விரிவான கண்ணோட்டத்தை வழங்கியுள்ளது. இந்த கொள்கைகளைப் பயன்படுத்துவதன் மூலம், இந்த சக்திவாய்ந்த ரியாக்ட் hook-இன் முழுத் திறனையும் நீங்கள் திறக்கலாம் மற்றும் மேலும் வலுவான மற்றும் நெகிழ்வான பயனர் இடைமுகங்களை உருவாக்கலாம்.

மேலும் படிக்க

• useImperativeHandle பற்றிய ரியாக்ட் ஆவணம்
• Forwarding Refs பற்றிய ரியாக்ட் ஆவணம்